<template>
  <!-- 员工公寓 -->
  <view class="content" v-if="info">
    <view class="postings basic">
      <view class="post_title">
        <text>基本信息</text>
<!--        <text @click="showPlan">-->
<!--          平面图-->
<!--        </text>-->
      </view>
      <view class="post_con" style="flex-direction: column">
          <view style="font-size: 30rpx;color: #333333;font-weight: bold;margin-bottom: 8rpx;">{{ info.roomNum }}</view>
          <view style="display: flex;justify-content: space-between">
            <text>租赁</text>
            <text>{{info.houseNumber}}人间</text>
            <text>{{info.builtUpArea}}(㎡)</text>
          </view>
      </view>
    </view>

    <view class="postings">
      <view class="post_title">
        租赁信息
      </view>
      <view class="post_con">
        <text>租赁状态</text>
        <text :class="info.leaseState==0?'rent':'occupancy'">{{ info.leaseState == 0 ? '待租' : '已租' }}</text>
      </view>
      <view class="post_con">
        <text>房间配置</text>
        <text>{{ info.capacity }}</text>
      </view>
      <view v-if="info.leaseState==1" class="post_con">
        <text>入驻人数</text>
        <text>{{ info.alreadyLive }}人</text>
      </view>
      <view v-if="info.leaseState==1" class="post_con">
        <text>所属企业</text>
        <text>{{ info.enterpriseName }}</text>
      </view>
      <view v-if="info.leaseState==1" class="post_con">
        <text>租赁日期</text>
        <text v-if="info.beginTime&&info.endTime">{{ info.beginTime.split(" ")[0] }} - {{ info.endTime.split(" ")[0] }}</text>
      </view>
    </view>

    <view class="postings facility">
      <view class="post_title">
        配套设施
      </view>
      <view v-for="(item,index) in info.facilityList" :key="index" class="post_con">
        <text>{{ item.facilityName }}</text>
        <text>{{ item.quantity }}</text>
      </view>
    </view>


    <!-- 弹窗 -->
    <u-modal v-model="planShow" :show-confirm-button='false' :mask-close-able="true" :show-title='false'>
      <view class="priveInformation">
        <view class="priceText borderPrice top-wrap">
          <u-swiper :list="info.fileList" name="url" height="400" mode="none"></u-swiper>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      info: null,
      factory: '',
      planShow: false,//弹窗
    };
  },
  onLoad({id}) {
    this.factoryId = id
    // this.getTitle(rows.parkNum+" | "+rows.roomNum)
    this.getInfo()
  },
  methods: {
    getTitle(title) {
      uni.setNavigationBarTitle({
        title: title
      });
    },
    showPlan() {
      this.planShow = true
    },
    getInfo() {
      let that = this
      //联网加载数据
      this.apis.buildingApi.buiRoom(this.factoryId).then(res => {
        this.info = res.data
      }).catch(() => {
        //联网失败的回调,隐藏下拉刷新的状态
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$subheadColor: #111111;
$titleColor: #333333;
@mixin boldTitle {
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
}

@mixin bordcon {
  font-size: 28rpx;
  color: #333333;
}

@mixin padding {
  padding: 30rpx 0;
}

.content {
  padding: 20rpx;
  box-sizing: border-box;

  .postings {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    padding: 0 32rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;

    .post_title {
      @include bordcon
      @include padding
      border-bottom: 1rpx solid #EEEEEE;
    }

    .post_con {
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #EEEEEE;
      @include padding

      text:nth-child(1) {
        @include boldTitle
      }

      text:nth-child(2) {
        @include bordcon
      }

      // 待租
      .rent {
        color: #F74D39 !important;
      }

      // 已租
      .occupancy {
        color: #44D94B !important;
      }
    }

    view:last-child {
      border-bottom: none;
    }
  }

  .basic {
    .post_title {
      display: flex;
      justify-content: space-between;
      @include bordcon
      @include padding

      text:nth-child(2) {
        @include boldTitle
      }
    }

    .post_con {
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #EEEEEE;
      @include padding;

      text:nth-child(1) {
        @include boldTitle
      }

      text:nth-child(2) {
        @include bordcon;
        text-align: right;
      }
    }
  }

  .facility {
    .post_con {
      text:nth-child(2) {
        @include bordcon
      }
    }

  }


  .priveInformation {
    position: relative;

    .top-wrap {
      width: 100%;
      height: 400rpx;
    }
  }
}
</style>
